<script setup>
import { OpenTag } from '@/components/common/index.js'

defineProps({
  mTag: {
    type: String,
    required: true,
  },
  type: {
    type: String,
    required: false,
  },
})

const listInfo = reactive({
  list: [],
  page: 1,
  pageSize: 10,
})

function getArticleList() {
  const res = []
  // 模拟100条数据
  for (let i = 0; i < 5; i++) {
    res.push({
      id: i,
      title: `我的2024年终总结——不如摸鱼去`,
      summary: `这个名字来源于我非常喜欢的许嵩的专辑《不如吃茶去》。我希望自己能够偶尔脱离忙碌的生活，享受一些轻松的时光，不再日复一日地做马牛。同时，我也希望大家能够在自己的领域中，创造出属于自己的一片天地。`,
      cover: `https://img2.baidu.com/it/u=1115522663,3151405869&fm=253&fmt=auto&app=138&f=JPEG?w=1067&h=800`,
      tags: [
        { id: 1, name: '前端' },
        { id: 2, name: '前端总结前端总结前端总结前端总结' },
      ],
      author: {
        id: 1,
        nickName: '不如摸鱼去',
      },
      articleMetric: {
        viewCount: 103,
        collectCount: 2,
        likeCount: 1,
        commentCount: 121,
      },
      isLike: true,
      isCollect: false,
      releaseTime: '2024-12-24',
    })
  }
  listInfo.list.push(...res)
  console.log('获取文章列表')
}
getArticleList()

// 更新方法(给子组件使用)
function updateItem(index, newItem) {
  listInfo.list[index] = newItem // 直接更新数组项
}
</script>

<template>
  <div v-infinite-scroll="getArticleList">
    <template v-for="(item, index) in listInfo.list" :key="item.id">
      <OpenTag
        :to="{
          name: 'ArticleDetail',
          params: { id: item.id },
          query: { title: item.title },
        }"
      >
        <ArticleItem
          :item-info="item"
          @update-item="(newItem) => updateItem(index, newItem)"
        />
      </OpenTag>
      <!-- 只在非最后一项时渲染分隔线 -->
      <el-divider v-if="index < listInfo.list.length - 1" />
    </template>
  </div>
</template>

<style scoped>
.el-divider--horizontal {
  margin: 12px 0;
}
</style>
